<template>
  <div class="app-container">
      <div class="item hauto ld">
        <fieldset>
        <legend>车辆信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name">车牌号码：</span>
                <span class="value">
                    <el-input v-model="car.licenseplate"></el-input>
                </span>
                <span class="name">具体车型：</span>
                <span class="value">
                    <el-input v-model="car.carname"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">车身颜色：</span>
                <span class="value">
                    <el-input v-model="car.licenseplate"></el-input>
                </span>
                <span class="name">车架号(VIN)：</span>
                <span class="value">
                    <el-input v-model="car.vincode"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">发动机号：</span>
                <span class="value">
                    <el-input v-model="car.enginenumber"></el-input>
                </span>
                <span class="name">购车日期：</span>
                <span class="value">
                    <el-date-picker type="date" v-model="car.buydate"></el-date-picker>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">是否本店购买：</span>
                <span class="value">
                    <el-switch v-model="car.buyinshop" active-color="#13ce66" inactive-color="#aaaaaa"></el-switch>
                </span>
                <span class="name"></span>
                <span class="value">
                </span>
            </div>
            <div class="fd-item">
                <span class="name">备注：</span>
                <span class="value"  style="width:100%;">
                    <el-input type="textarea" rows="5" v-model="car.remark" style="width:100%;"></el-input>
                </span>
            </div>
        </div>
        </fieldset>
      </div>

      <div class="item hauto ld">
        <fieldset>
        <legend>客户信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name">车主类型</span>
                <span class="value">
                    <el-select v-model="customer.type" placeholder="请选择">
                        <el-option v-for="item in selectOptions.ownerType"
                            :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span class="name" v-show="customer.type==2">身份证号码：</span>
                <span class="value" v-show="customer.type==2">
                    <el-input v-model="customer.certcode"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">联系人：</span>
                <span class="value">
                    <el-input v-model="customer.contacts"></el-input>
                </span>
                <span class="name">联系电话：</span>
                <span class="value">
                    <el-input v-model="customer.contactphone"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">使用人：</span>
                <span class="value">
                    <el-input v-model="customer.usingpeople"></el-input>
                </span>
                <span class="name">使用人电话：</span>
                <span class="value">
                    <el-input v-model="customer.usingphone"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">具体地址：</span>
                <span class="value" style="width:100%;">
                    <div>
                    <bx-address :address-info="customer.address"></bx-address>
                    </div>
                </span>
                
            </div>
            
        </div>
        </fieldset>
      </div>

    <div class="item hauto ld">
        <fieldset>
        <legend>保险信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name">保险公司</span>
                <span class="value">
                    <el-input v-model="insurance.company"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">起算日期：</span>
                <span class="value">
                    <el-input v-model="insurance.starttime"></el-input>
                </span>
                <span class="name">到期日期：</span>
                <span class="value">
                    <el-input v-model="insurance.endtime"></el-input>
                </span>
            </div>
            
            
        </div>
        </fieldset>
      </div>
      <div class="item" style="text-align:right; padding-right:20px;">
          <el-button type="primary" @click="confirmClick()">确认开单</el-button>
      </div>

  </div>
</template>

<script>
import BxAddress from '@/components/BxAddress'
export default {
    components:{
        BxAddress
    },
    data(){
        return {
            car:{

            },
            customer:{
                type:'',
                certcode:'',
                contacts:'',
                contactphone:'',
                usingpeople:'',
                usingphone:'',
                address:{
                    province:{name:'',code:''},
                    city:{name:'',code:''},
                    district:{name:'',code:''},
                    details:'',
                    merge:'', //合并一起的地址
                    isvalid:false //效验
                }
            },
            insurance:{
                company:'',
                starttime:'',
                endtime:'',
            },
            selectOptions:{
                ownerType:[
                    {label:'企业',value:'1'},
                    {label:'个人',value:'2'},
                ]
            }
        }
    },
    created(){

    },
    methods:{
        confirmClick(){
             this.$router.push({
                 path:'/aftersalemanage/allocate/workorder'
             })

        }
    }
}
</script>

<style scoped>
  .item.ld{
        padding:5px 10px;margin-bottom:20px;
    }
   .item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex; 
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
        color:#999;
    }
    .fd-content>.fd-item>span.value{
        width:300px; display: flex; align-items: center;
    }
    .fd-content>.fd-item>span.name:nth-child(3){
        margin-left:20px;
    }
</style>